<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    width: {
      type: String,
      default: '0px'
    },
    height: {
      type: String,
      default: '0px'
    },
    data:{
      
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.option)
    }
  },
  created(){
          const xData = (function() {
        const data = [];
        for (let i = 1; i < 10; i++) {
          data.push(i + "#车间");
        }
        return data;
      })();
    this.color = ["#0050E2","#0780ED","#00AFC3","#44D428","#FFC100","#FF9200","#EC0040","#FF5227"]
    this.option = {
        color: this.color,      
        backgroundColor: "#fff",
  title: {
          text: "kw",
          left: 0,
          textStyle: {
            color: "#999",
            fontSize: "12"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        grid: {
          // 网格位置 right
          right: 0,
          // 网格底部距离
          bottom: 80
        },
        legend: {
          // 图例宽度
          width: "90%",
          // 图例icon宽度
          itemWidth: 10,
          // 图例icon高度
          itemHeight: 10,
          // 图例位置  right
          right: 0,
          // 图例样式
          textStyle: {
            color: "#90979c",
            fontSize: "12"
          },
          data: [
            { name: "#1配电室", icon: "circle" },
            { name: "#2配电室", icon: "circle" },
            { name: "#3配电室", icon: "circle" },
            { name: "#4配电室", icon: "circle" },
            { name: "#5配电室", icon: "circle" }
          ]
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: function(value, index) {
                let s = value.split("#")[0];
                let s1 = value.split("#")[1];
                let s2 = s1.split("").join("\n");
                //  return value.split("").join("\n");
                return s + "#" + "\n" + s2;
              }
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#e5e5e5",
                type: "dotted"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#999",
                width: 0
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "#1配电室",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            itemStyle: {
              color: "#0050E2"
            },
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          },

          {
            name: "#2配电室",
            type: "bar",
            stack: "total",
            itemStyle: {
              color: "#0780ED"
            },
            data: [
              327,
              1776,
              507,
              1200,
              800,
              482,
              204,
              1390,
              1001,
              951,
              381,
              220
            ]
          },
          {
            name: "#3配电室",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            itemStyle: {
              color: "#00AFC3"
            },
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          },
          {
            name: "#4配电室",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            itemStyle: {
              color: "#FF9200"
            },
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          },
          {
            name: "#5配电室",
            type: "bar",
            stack: "total",
            barMaxWidth: 24,
            barGap: "10%",
            itemStyle: {
              color: "#FF5227"
            },
            data: [
              709,
              1917,
              2455,
              2610,
              1719,
              1433,
              1544,
              3285,
              5208,
              3372,
              2484,
              4078
            ]
          }
        ]
      }
  }
}
</script>
